<template>
    <el-container>
        <el-main id="map" class="mapClass" ref="mapRef"
                 style="display: flex;flex-direction: column;width: 100%;height: 100%;">
        </el-main>
        <!--        <el-card-->
        <!--                style="width: 250px; flex-direction: column;display: flex; position: absolute; right: 0px;margin-top: 3%; margin-right: 3%;align-items: center;">-->
        <!--            <span>航迹点编辑</span>-->
        <!--            <el-select size="small" style="margin-top: 2px; width: 230px;" placeholder="选择航迹点" v-model="pointId">-->
        <!--                <el-option v-for="(item,index) in path" :label="index" :key="index" :value="index"></el-option>-->
        <!--            </el-select>-->

        <!--            <div style="width: 230px; margin-top: 2px;display: flex; flex-direction: row;justify-content: space-between;">-->
        <!--                <span style="font-size: 1.2ch;color: gray;">经度:{{pointData.longitude}}</span>-->
        <!--                <span style="font-size: 1.2ch;color: gray;">纬度:{{pointData.latitude}}</span>-->
        <!--            </div>-->
        <!--            <div-->
        <!--                    style="width: 230px; display: flex;flex-direction: row; margin-top: 2px;align-items: center;justify-content: space-between;">-->
        <!--                <span>高度:</span>-->
        <!--                <el-input size="small" style="width: 180px;" v-model="pointData.altitude"-->
        <!--                          :placeholder="pointData.altitude"></el-input>-->
        <!--            </div>-->
        <!--            <div-->
        <!--                    style="width: 230px; display: flex;flex-direction: row; margin-top: 2px;align-items: center;justify-content: space-between;">-->
        <!--                <span>速度:</span>-->
        <!--                <el-input size="small" style="width: 180px;" v-model="pointData.speed"-->
        <!--                          :placeholder="pointData.speed"></el-input>-->
        <!--            </div>-->
        <!--            <div>-->

        <!--            </div>-->
        <!--            <el-select size="small" style="width: 230px; margin-top: 2px;" v-model="pointData.type"-->
        <!--                       placeholder="航迹点类型">-->
        <!--                <el-option label="过路点" value=1></el-option>-->
        <!--                <el-option label="悬停点" value=2></el-option>-->
        <!--                <el-option label="降落点" value=3></el-option>-->
        <!--            </el-select>-->
        <!--            <div style="display: flex;flex-direction: row;justify-content: space-around;">-->
        <!--                <el-button type="success" size="mini" style=" margin-top: 2px;" @click="editPoint()">确认</el-button>-->
        <!--            </div>-->
        <!--        </el-card>-->

        <el-footer>
            <div class="rBottom">
                <div>
                    <el-button @click="createAndClearRoute()" size="small" type="primary"
                               :disabled="controlButtonDisable">{{controlButton}}
                    </el-button>

                    <el-button @click="detailEdit()" v-show="detailEditButtonDisable" size="small"
                               type="primary">{{detailEditButton}}
                    </el-button>

                    <el-button @click="editForbidden()" size="small"
                               type="primary">{{forbiddenAction}}
                    </el-button>

                </div>
                <div>
                    <el-input size="small" style="width: 150px" placeholder="输入航线名称"
                              v-model="routeInfo.routeName"></el-input>
                    <el-select size="small" style="width: 150px; margin-left: 20px;" v-model="routeInfo.routeType"
                               placeholder="航线类型">
                        <el-option label="多旋翼" value=1></el-option>
                        <el-option label="固定翼" value=2></el-option>
                    </el-select>
                    <el-button @click="uploadRoute()" size="small" style="margin-left: 20px;"
                               type="success">上传航线
                    </el-button>
                </div>
            </div>

        </el-footer>
    </el-container>


</template>
<script>
    import AMapLoader from "@amap/amap-jsapi-loader"
    import webSetInfo from "../server/webSetInfo";
    import {GET_MAPBOX_MAP} from "../components/map/CreateMap";
    import {testLine} from "../components/map";
    import * as turf from "@turf/turf";
    import uavIcon from "../assets/img/uavIcon.jpeg";
    import Route_Card from "./Route_Card";
    import mapboxgl from "mapbox-gl";
    import floor from "../assets/img/floor.jpg";
    import * as THREE from "three";
    import {loadCylinder} from "../components/map/loadCylinder";
    import {load2} from "../components/map/load2";
    import MapboxDraw from "@mapbox/mapbox-gl-draw/index";
    import {noFlyClick} from "../components/map/noFlyClickMap";
    import {rightClick} from "../components/map/rightClickMap";

    export default {
        components: {Route_Card},
        data() {
            return {
                Rmap: null,
                userInfo: null,
                forbiddenArea: [],
                routeInstance: null, //绘制的路线对象
                path: [], //路径实例
                pointId: null,
                pointData: {
                    latitude: null,
                    longitude: null,
                    altitude: 100,
                    speed: 10,
                    type: 1
                },
                forbiddenAction: '加载禁飞区',
                forbiddenData: [],
                controlButton: '开启编辑',
                detailEditButton: '轨迹调整',
                pointEditAble: true,
                controlButtonDisable: false,
                detailEditButtonDisable: false,

                polylineEditor: null,

                routeInfo: {
                    routeName: '',
                    routeType: null,
                },
                count: 0,
                forbiddenLeftClick: null,
                forbiddenRightClick: null,
                isDrawing: false,
                draw: null,
                editDrawAction: false,
                threeScene: null,
                threeCamera: null,
                threeRenderer: null,
                models: [],
                hoveredCylinderInfo: '',
                leftClick: null,
                rightClick: null,
                moveWatch: null,
                scene: null,
                camera: null,
                renderer: null,
                cylinders: [],
                raycaster: new THREE.Raycaster(),
                mouse: new THREE.Vector2(),
                hoveredCylinder: null,
                tooltipX: 0,
                tooltipY: 0,
                modelTransform: {}
            }
        },


        mounted() {
            this.initData();
            this.initMap();
            // this.initThree();
        },

        methods: {
            initData() {
                this.$axios_token({
                    url: `${webSetInfo.apiUrl}` + `/route/getForbidden`,
                    method: 'post',
                    data: {}
                }).then(res => {
                    let data = res.data;
                    if (res.code == 200 && data) {
                        this.forbiddenData = res.data;
                    }
                })
            },

            initMap() {
                const map = GET_MAPBOX_MAP();

                map.on('style.load', () => {
                    // Insert the layer beneath any symbol layer.
                    const layers = map.getStyle().layers;
                    const labelLayerId = layers.find(
                        (layer) => layer.type === 'symbol' && layer.layout['text-field']
                    ).id;

                    map.addLayer(
                        {
                            'id': 'add-3d-buildings',
                            'source': 'composite',
                            'source-layer': 'building',
                            'filter': ['==', 'extrude', 'true'],
                            'type': 'fill-extrusion',
                            'minzoom': 15,
                            'paint': {
                                'fill-extrusion-color': '#aaa',

                                // Use an 'interpolate' expression to
                                // add a smooth transition effect to
                                // the buildings as the user zooms in.
                                'fill-extrusion-height': [
                                    'interpolate',
                                    ['linear'],
                                    ['zoom'],
                                    15,
                                    0,
                                    15.05,
                                    ['get', 'height']
                                ],
                                'fill-extrusion-base': [
                                    'interpolate',
                                    ['linear'],
                                    ['zoom'],
                                    15,
                                    0,
                                    15.05,
                                    ['get', 'min_height']
                                ],
                                'fill-extrusion-opacity': 0.6
                            }
                        },
                        labelLayerId
                    );
                });

                map.addControl(new mapboxgl.ScaleControl(), 'bottom-left')

                this.draw = new MapboxDraw({
                    displayControlsDefault: false,
                    controls: {line_string: true, trash: true},
                    styles: this.customLineStyle()
                });
                map.addControl(this.draw);
                map.on('draw.create', (e) => {
                    console.log('航线坐标:', e.features[0].geometry.coordinates)
                });
                map.on('draw.update', (e) => {
                    console.log('更新坐标:', e.features[0].geometry.coordinates)
                });

                this.Rmap = map;
            },

            initThree() {
                const map = this.Rmap;
                const canvas = map.getCanvas();
                // 初始化 Three.js 相机（透视相机）
                const threeScene = new THREE.Scene();
                const threeCamera = new THREE.PerspectiveCamera(
                    75, // 视野角度 (FOV)
                    window.innerWidth / window.innerHeight, // 宽高比
                    0.1,   // 近裁剪面
                    100000 // 远裁剪面
                );
                // 初始化渲染器（与 Mapbox 共享 WebGL 上下文）
                const threeRenderer = new THREE.WebGLRenderer({
                    canvas: canvas, // 直接使用 Mapbox 的 Canvas
                    context: canvas.getContext('webgl'),
                    antialias: true,
                    alpha: true // 允许透明背景
                });
                threeRenderer.autoClear = false; // 禁止自动清空画布（保留地图渲染）

                // 添加基础光照
                const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
                threeScene.add(ambientLight);
                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
                directionalLight.position.set(0, 1000, 0);
                threeScene.add(directionalLight);
                map.on('move', () => {
                    syncCameraWithMapbox();
                    threeRenderer.render(threeScene, threeCamera); // 重新渲染
                });

                function syncCameraWithMapbox() {
                    // 获取 Mapbox 当前视角参数
                    const pitch = map.getPitch();
                    const bearing = map.getBearing();
                    const center = map.getCenter();
                    const zoom = map.getZoom();

                    // 计算 Three.js 相机位置（基于地图中心点）
                    const centerMercator = mapboxgl.MercatorCoordinate.fromLngLat(center, 0);
                    threeCamera.position.set(
                        centerMercator.x,
                        centerMercator.y,
                        centerMercator.z + (1000 / Math.pow(2, zoom - 20)) // 根据缩放调整高度
                    );

                    // 设置相机旋转（适配 Mapbox 的 pitch 和 bearing）
                    threeCamera.rotation.order = 'YXZ';
                    threeCamera.rotation.y = (-bearing * Math.PI) / 180; // 方位角转弧度
                    threeCamera.rotation.x = (pitch * Math.PI) / 180;    // 俯仰角转弧度
                }

                function animate() {
                    requestAnimationFrame(animate);
                    syncCameraWithMapbox(); // 持续同步相机参数
                    threeRenderer.render(threeScene, threeCamera); // 重新渲染
                }

                animate();

                // 这个就是和建模工程师确定的建模时的0点对应的真实世界的经纬度坐标（本文经纬度为wgs84坐标系，如果是其他坐标系，需要先转换成wgs84）
                const threeMapZeroCenter = {
                    lng: 114.2858126490011,
                    lat: 30.581177854141437
                }

                // wgs84经纬度坐标转threejs三维坐标
                function wgs84ToThreePosition(lng, lat, height) {
                    // 模型世界坐标0点对应的wgs84坐标
                    // TODO: 需要和模型组的确定准确坐标
                    const cityModelCenterPos = {
                        lng: threeMapZeroCenter.lng,
                        lat: threeMapZeroCenter.lat,
                        height: 50,
                    }

                    // 找到地图的中心对应的经纬度坐标
                    const center = lngLatToMercator(cityModelCenterPos)
                    const mercatorMax = 20037508.3427892

                    const y = height ? height : 0
                    const z = (+lng / 180.0) * mercatorMax
                    let x = (Math.PI / 180.0) * +lat
                    const tmp = Math.PI / 4.0 + x / 2.0
                    x = (mercatorMax * Math.log(Math.tan(tmp))) / Math.PI

                    // 这一步是重点：墨卡托平面坐标系很大，需要结合模型调试一个合适的比例，例如下面的0.85，是结合模型上两个实际点位调试出的大概比例，通常通过0点和另外一个点确定这比例系数需要设置多少。
                    return {
                        x: (center.x - x) * 0.85,
                        y: y - center.y,
                        z: (center.z - z) * 0.85,
                    }
                }

                // 经纬度坐标转墨卡托
                function lngLatToMercator({lng, lat, height}) {
                    var y = height ? height : 0
                    var z = (lng / 180.0) * 20037508.3427892
                    var x = (Math.PI / 180.0) * lat
                    var tmp = Math.PI / 4.0 + x / 2.0
                    x = (20037508.3427892 * Math.log(Math.tan(tmp))) / Math.PI
                    return {x: x, y: y, z: z}
                }

                map.on('contextmenu', this.handleRightClick);

                this.threeRenderer = threeRenderer;
                this.threeScene = threeScene;
                this.threeCamera = threeCamera;
                this.Rmap = map;
            },


            // 自定义航线样式（橙色虚线）‌:ml-citation{ref="1,3" data="citationList"}
            customLineStyle() {
                return [{
                    id: 'active-line',
                    type: 'line',
                    filter: ['==', 'active', 'true'],
                    paint: {
                        'line-color': '#FF6B35',
                        'line-width': 4,
                        'line-dasharray': [2, 2]
                    }
                }];
            },

            toggleDrawMode() {
                this.editDrawAction = !this.editDrawAction;
                this.isDrawing = true;
                this.draw.changeMode('draw_line_string');
                if (!this.isDrawing) {
                    this.removeRightClickListener();
                }
            },

            handleRightClick(e) {
                console.log("right_click____");
                e.preventDefault();
                if (this.draw.getMode() === 'draw_line_string') {
                    this.draw.changeMode('simple_select');
                    this.controlButtonDisable = false;// 停止绘制‌:ml-citation{ref="4" data="citationList"}
                    this.isDrawing = false;
                    this.removeRightClickListener(); // 调用移除监听方法‌:ml-citation{ref="5" data="citationList"}
                }
            },

            beforeDestroy() {
                // 组件销毁时移除残留监听‌:ml-citation{ref="8" data="citationList"}
                this.Rmap.off('contextmenu', this.handleRightClick);
            },

            // 移除右键监听‌:ml-citation{ref="2" data="citationList"}
            removeRightClickListener() {
                this.Rmap.off('contextmenu', this.handleRightClick);
            },

            // 清空所有航线‌:ml-citation{ref="2" data="citationList"}
            clearAll() {
                const features = this.draw.getAll();
                if (features.features.length > 0) {
                    features.features.forEach(feat => this.draw.delete(feat.id));
                }
            },

            addEventListeners() {
                // 左键添加圆柱
                this.leftClick = this.Rmap.on('click', e => this.createCylinder(e));

                // 右键删除
                this.rightClick = this.Rmap.on('contextmenu', e => {
                    e.preventDefault();
                    this.deleteCylinder(e.point);
                });

                // 悬停检测
                this.moveWatch = this.Rmap.on('mousemove', e => this.detectHover(e.point));
            },

            createCylinder(e) {
                const modelOrigin = [e.lngLat.lng, e.lngLat.lat]
                const modelRotate = [Math.PI / 2, 0, 0];
                const fromLngLat = mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, 0);
                this.modelTransform = {
                    translateX: fromLngLat.x,
                    translateY: fromLngLat.y,
                    translateZ: fromLngLat.z,
                    rotateX: modelRotate[0],
                    rotateY: modelRotate[1],
                    rotateZ: modelRotate[2],
                    scale: 5.41843220338983e-8
                };
                const lngLat = e.lngLat;
                const position = this.lngLatToWorld(lngLat);
                const geometry = new THREE.CylinderGeometry(5, 5, 20, 32);
                const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
                const cylinder = new THREE.Mesh(geometry, material);

                cylinder.position.set(position.x, position.y, 10);
                cylinder.userData = { lngLat };
                this.scene.add(cylinder);
                this.cylinders.push(cylinder);
            },

            deleteCylinder(screenPoint) {
                this.updateRaycaster(screenPoint);
                const intersects = this.raycaster.intersectObjects(this.cylinders);

                if (intersects.length > 0) {
                    const obj = intersects.object;
                    this.scene.remove(obj);
                    this.cylinders = this.cylinders.filter(c => c !== obj);
                }
            },

            detectHover(screenPoint) {
                this.updateRaycaster(screenPoint);
                const intersects = this.raycaster.intersectObjects(this.cylinders);

                if (intersects.length > 0) {
                    this.hoveredCylinder = intersects.object;
                    [this.tooltipX, this.tooltipY] = [screenPoint.x, screenPoint.y];
                    this.Rmap.getCanvas().style.cursor = 'pointer';
                } else {
                    this.hoveredCylinder = null;
                    this.Rmap.getCanvas().style.cursor = '';
                }
            },

            updateCamera(matrix) {
                const m = new THREE.Matrix4().fromArray(matrix);
                this.camera.projectionMatrix = m;
            },

            lngLatToWorld(lngLat) {
                return this.Rmap.project(lngLat);
            },

            updateRaycaster({ x, y }) {
                const rect = this.Rmap.getCanvas().getBoundingClientRect();
                this.mouse.x = ((x - rect.left) / rect.width) * 2 - 1;
                this.mouse.y = -((y - rect.top) / rect.height) * 2 + 1;
                this.raycaster.setFromCamera(this.mouse, this.camera);
            },

            createAndClearRoute() {
                this.controlButtonDisable = true;
                if (this.controlButton == '开启编辑') {
                    this.controlButton = '清空编辑';
                    this.toggleDrawMode();
                } else {
                    this.controlButton = '开启编辑'
                    this.routeInstance = null
                    this.path = null
                    this.pointId = null
                    this.polylineEditor = null
                    this.controlButtonDisable = false;
                    this.detailEditButtonDisable = false;
                }
            },

            editPoint() {
                //修改航迹点
                if (this.pointId != null) {
                    let data = this.path;
                    this.path[this.pointId] = this.pointData
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                }
            },

            detailEdit() {

            },

            lngLatToPosition(lng, lat, altitude = 50) {
                const phi = (90 - lat) * Math.PI / 180;
                const theta = (lng + 180) * Math.PI / 180;
                const radius = this.earthRadius + altitude;

                return new THREE.Vector3(
                    -radius * Math.sin(phi) * Math.cos(theta),
                    radius * Math.cos(phi),
                    radius * Math.sin(phi) * Math.sin(theta)
                );
            },

            editForbidden() {
                var that = this;
                // let map = this.Rmap;
                let clickAction = '';
                if (this.forbiddenAction == '加载禁飞区') {
                    this.forbiddenAction = '上传禁飞区';
                    var customLayer = {
                        id: '3dmodel' + that.count,
                        type: 'custom',
                        renderingMode: '3d',
                        onAdd: function (map, gl) {
                            that.scene = new THREE.Scene();
                            that.camera = new THREE.PerspectiveCamera(
                                75, // 视野角度 (FOV)
                                window.innerWidth / window.innerHeight, // 宽高比
                                0.1,   // 近裁剪面
                                100000 // 远裁剪面
                            );
                            that.renderer = new THREE.WebGLRenderer({
                                canvas: map.getCanvas(),
                                context: gl,
                                antialias: true,
                                alpha: true // 允许透明背景
                            });
                            that.addEventListeners();
                        },
                        render: function (gl, matrix) {
                            that.camera.projectionMatrix.elements = matrix;
                            if (JSON.stringify(that.modelTransform) !== "{}") {
                                // 矩阵坐标转换
                                var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), this.modelTransform.rotateX);
                                var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), this.modelTransform.rotateY);
                                var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), this.modelTransform.rotateZ);

                                var m = new THREE.Matrix4().fromArray(matrix);
                                var l = new THREE.Matrix4().makeTranslation(this.modelTransform.translateX, this.modelTransform.translateY, this.modelTransform.translateZ)
                                    .scale(new THREE.Vector3(this.modelTransform.scale, -this.modelTransform.scale, this.modelTransform.scale))
                                    .multiply(rotationX)
                                    .multiply(rotationY)
                                    .multiply(rotationZ);
                                that.camera.projectionMatrix = m.multiply(l);
                            }
                            that.renderer.state.reset();
                            that.renderer.render(that.scene, that.camera);
                            //渲染
                            that.Rmap.triggerRepaint();
                        }

                    }
                    this.Rmap.addLayer(customLayer, 'waterway-label');

                    // map.on('click', function (e) {
                    //     // 当前圆柱体地理位置，及展示在three.js所需参数
                    //     // 需要放在哪个位置
                    //     if (e.originalEvent.button === 0) { // 确保是鼠标左键点击
                    //         var modelOrigin = [e.lngLat.lng, e.lngLat.lat]
                    //         var modelAltitude = 0;
                    //         var modelRotate = [Math.PI / 2, 0, 0];
                    //         var modelScale = 5.41843220338983e-8;
                    //         let modelTransform = {
                    //             translateX: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).x,
                    //             translateY: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).y,
                    //             translateZ: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).z,
                    //             rotateX: modelRotate[0],
                    //             rotateY: modelRotate[1],
                    //             rotateZ: modelRotate[2],
                    //             scale: modelScale
                    //         };
                    //
                    //         var customLayer = {
                    //             id: '3dmodel' + that.count,
                    //             type: 'custom',
                    //             renderingMode: '3d',
                    //             onAdd: function (map, gl) {
                    //                 const lngLat = e.lngLat; // 获取点击位置的经纬度
                    //                 // 将经纬度转换为 Three.js 世界坐标
                    //                 const threePosition = that.lngLatToPosition(lngLat.lng, lngLat.lat)
                    //                 // 添加圆柱体形状
                    //                 var cylinder = new THREE.CylinderGeometry(50, 50, 200, 32);
                    //
                    //                 // 添加材质
                    //                 var materials = new THREE.MeshBasicMaterial({
                    //                     color: '#fdff6e',
                    //                     side: THREE.DoubleSide,
                    //                     opacity: 0.5,
                    //                     transparent: true
                    //                 });
                    //                 cylinder.userData = {layerId: '3dmodel' + that.count};
                    //
                    //                 // 创建圆柱体
                    //                 var cylinderMesh = new THREE.Mesh(cylinder, materials);
                    //                 cylinderMesh.position.copy(threePosition);
                    //                 that.threeScene.add(cylinderMesh);
                    //
                    //             },
                    //             render: function (gl, matrix) {
                    //                 // 矩阵坐标转换
                    //                 var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
                    //                 var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
                    //                 var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);
                    //
                    //                 var m = new THREE.Matrix4().fromArray(matrix);
                    //                 var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ)
                    //                     .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
                    //                     .multiply(rotationX)
                    //                     .multiply(rotationY)
                    //                     .multiply(rotationZ);
                    //
                    //                 that.threeCamera.projectionMatrix.elements = matrix;
                    //                 that.threeCamera.projectionMatrix = m.multiply(l);
                    //                 that.threeRenderer.state.reset();
                    //                 that.threeRenderer.render(that.threeScene, that.threeCamera);
                    //                 //渲染
                    //                 that.Rmap.triggerRepaint();
                    //             }
                    //         };
                    //         map.addLayer(customLayer);
                    //         that.models.push('3dmodel' + that.count);
                    //         that.count++;
                    //     }
                    // });


                    // map.on('mousemove', function (e) {
                    //     const raycaster = new THREE.Raycaster();
                    //     const mouse = new THREE.Vector2();
                    //     const camera = new THREE.PerspectiveCamera(75,  window.innerWidth/window.innerHeight, 0.1, 1000);
                    //     // 坐标转换
                    //     mouse.x = (e.originalEvent.clientX / window.innerWidth) * 2 - 1;
                    //     mouse.y = -(e.originalEvent.clientY / window.innerHeight) * 2 + 1;
                    //     // 同步Three.js相机参数（关键步骤）
                    //     const projectionMatrix = map.getFreeCameraOptions().projectionMatrix;
                    //     threeCamera.projectionMatrix.fromArray(projectionMatrix);
                    //     raycaster.setFromCamera(mouse, camera);
                    //     const intersects = raycaster.intersectObjects(scene.children);
                    //
                    //     if (intersects.length > 0) {
                    //         for (let obj of intersects) {
                    //             const layerId = obj.object.userData.layerId;
                    //             if (layerId && layerId.slice(0,7) === '3dmodel') {
                    //                 console.log('Hovered Layer ID:', layerId); // 输出当前图层ID
                    //             }
                    //         }
                    //     }
                    // });


                } else {
                    this.forbiddenAction = '加载禁飞区';
                    this.Rmap.off('click', this.leftClick);
                    this.Rmap.off('contextmenu', this.rightClick);
                    this.Rmap.off('mousemove', this.moveWatch);
                    this.camera = null;
                    this.scene = null;
                    this.renderer = null;
                    this.modelTransform = {};
                }
            },

            uploadRoute() {

            },
        },

        computed: {
            hoveredLng() {
                if (this.hoveredCylinder) {
                    return this.hoveredCylinder.userData.lngLat.lng;
                }
                return 0;
            },
            hoveredLat() {
                if (this.hoveredCylinder) {
                    return this.hoveredCylinder.userData.lngLat.lat;
                }
                return 0;
            }
        }
    }
</script>

<style>

    .mapClass {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .mapClass .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-scale {
        height: 10px;
        background-color: transparent !important;
        line-height: 10%;
        text-align: center
    }

    .mapClass .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-logo {
        display: none !important;
    }

    .mapClass .mapboxgl-ctrl-bottom-right {
        display: none !important;
    }

    .rBottom {
        /*margin-left: 2%;*/
        height: 13%;
        width: 96%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 2%;
    }


</style>
